<h2>{{ 'DESCRIPTIONS.SETTINGS.IAM_VIEWS.TITLE' | translate }}</h2>
<p class="views-desc cnsl-secondary-text">{{ 'DESCRIPTIONS.SETTINGS.IAM_VIEWS.DESCRIPTION' | translate }}</p>

<cnsl-refresh-table (refreshed)="loadViews()" [loading]="loading$ | async">
  <table [dataSource]="dataSource" mat-table class="table views-table" aria-label="Views" matSort>
    <ng-container matColumnDef="viewName">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'IAM.VIEWS.VIEWNAME' | translate }}</th>
      <td mat-cell *matCellDef="let view">{{ view.viewName }}</td>
    </ng-container>

    <ng-container matColumnDef="database">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'IAM.VIEWS.DATABASE' | translate }}</th>
      <td mat-cell *matCellDef="let view">{{ view.database }}</td>
    </ng-container>

    <ng-container matColumnDef="sequence">
      <th mat-header-cell *matHeaderCellDef>{{ 'IAM.VIEWS.SEQUENCE' | translate }}</th>
      <td mat-cell *matCellDef="let view">{{ view.processedSequence }}</td>
    </ng-container>

    <ng-container matColumnDef="eventTimestamp">
      <th mat-header-cell *matHeaderCellDef>{{ 'IAM.VIEWS.EVENTTIMESTAMP' | translate }}</th>
      <td mat-cell *matCellDef="let view">
        <span>{{ view?.eventTimestamp | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span>
      </td>
    </ng-container>

    <ng-container matColumnDef="lastSuccessfulSpoolerRun">
      <th mat-header-cell *matHeaderCellDef>{{ 'IAM.VIEWS.LASTSPOOL' | translate }}</th>
      <td mat-cell *matCellDef="let view">
        <span>{{ view?.lastSuccessfulSpoolerRun | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>
  <cnsl-paginator #paginator class="paginator" [hidePagination]="true" [length]="dataSource.data.length || 0">
  </cnsl-paginator>
</cnsl-refresh-table>
